Getting Started with React Development with the React Suite Library — AutoComplete and Toggle

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

AutoComplete

We can add an autocomplete input into our React app with the AutoComplete component.

For instance, we can write:

import React from "react";
import { AutoComplete } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const data = ["apple", "orange", "grape"];

export default function App() {
  return (
    <div className="App">
      <AutoComplete data={data} />
    </div>
  );
}

We pass the data into the data prop to display the autocomplete choices.

We can render a custom item with the renderItem prop:

import React from "react";
import { AutoComplete, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const data = ["apple", "orange", "grape"];

export default function App() {
  return (
    <div className="App">
      <AutoComplete
        data={data}
        renderItem={(item) => {
          return (
            <div>
              <Icon icon="star" /> {item.label}
            </div>
          );
        }}
      />
    </div>
  );
}

The disabled prop disables the autocomplete.

Also, we can add autocomplete into input groups:

import React from "react";
import { AutoComplete, Icon, InputGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const data = ["apple", "orange", "grape"];

export default function App() {
  return (
    <div className="App">
      <InputGroup inside>
        <AutoComplete data={data} />
        <InputGroup.Button>
          <Icon icon="search" />
        </InputGroup.Button>
      </InputGroup>
    </div>
  );
}

We can make it a controlled input by setting the value and onChange props:

import React, { useState } from "react";
import { AutoComplete } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const data = ["apple", "orange", "grape"];

export default function App() {
  const [value, setValue] = useState();

  const handleChange = (val) => {
    setValue(val);
  };

  return (
    <div className="App">
      <AutoComplete data={data} value={value} onChange={handleChange} />
    </div>
  );
}

value has the inputted value, which we set with tyhe handleChange function.

val has the inputted value, so we can call setValue to set value.

Toggle

We can add a toggle with the Toggle component.

For instance, we can write:

import React from "react";
import { Toggle } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Toggle defaultChecked />
    </div>
  );
}

defaultChecked will make it checked by default.

The size prop lets us set the size of the toggle:

import React from "react";
import { Toggle } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Toggle size="lg" />
    </div>
  );
}

lg makes it large. sm makes it small. md makes it medium.

We can add text to the toggle and they’re displayed according to whether it’s checked or not.

For instance, we can write:

import React from "react";
import { Toggle } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Toggle size="lg" checkedChildren="Open" unCheckedChildren="Close" />
    </div>
  );
}

checkedChildren is displayed when it’s checked and unCheckedChildren is displayed when it’s not.

The disabled prop disables the toggle.

Conclusion

We can add autocomplete and toggles into our React app with React suite.